<template>
  <div class="app-container" :class="{ 'dark-mode': isDarkMode }">
    <el-container>
      <el-header height="60px">
        <div class="header-container">
          <div class="logo">
            <img src="@/assets/vue.svg" alt="Logo" height="40" />
            <h1 v-if="!sidebarCollapsed">Admin System</h1>
          </div>
          <div class="header-right">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar :size="32" :src="userInfo?.avatar" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="userCenter">{{ $t('common.userCenter') }}</el-dropdown-item>
                  <el-dropdown-item command="toggleTheme">{{ isDarkMode ? $t('theme.light') : $t('theme.dark') }}</el-dropdown-item>
                  <el-dropdown-item command="toggleLocale">{{ locale === 'zh-CN' ? 'English' : '中文' }}</el-dropdown-item>
                  <el-dropdown-item divided command="logout">{{ $t('common.logout') }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="sidebarCollapsed ? '64px' : '200px'" class="sidebar">
          <div class="sidebar-toggle" @click="toggleSidebar">
            <el-icon>
              <component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
            </el-icon>
          </div>
          <el-menu
            :default-active="activeMenu"
            :collapse="sidebarCollapsed"
            :collapse-transition="false"
            :unique-opened="true"
            router
          >
            <template v-for="route in routes" :key="route.path">
              <el-menu-item :index="`/${route.path}`">
                <el-icon v-if="route.meta?.icon">
                  <component :is="route.meta.icon" />
                </el-icon>
                <span>{{ $t(route.meta?.title || '') }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { useConfigStore } from '@/store/modules/config'
import { useI18n } from 'vue-i18n'
import { ElMessageBox } from 'element-plus'
import { Fold, Expand } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const configStore = useConfigStore()
const { t, locale } = useI18n()

// 获取用户信息
const userInfo = computed(() => userStore.userInfo)

// 侧边栏状态
const sidebarCollapsed = computed(() => configStore.sidebarCollapsed)
const toggleSidebar = () => configStore.toggleSidebar()

// 主题设置
const isDarkMode = computed(() => configStore.theme === 'dark')

// 获取路由
const routes = computed(() => {
  // 直接从router.options.routes中获取根路由的children
  const rootRoute = router.options.routes.find(route => route.path === '/')
  return rootRoute ? rootRoute.children : []
})

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 下拉菜单命令处理
const handleCommand = (command) => {
  switch (command) {
    case 'userCenter':
      // 跳转到个人中心
      break
    case 'toggleTheme':
      configStore.toggleTheme()
      break
    case 'toggleLocale':
      const newLocale = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'
      locale.value = newLocale
      configStore.setLocale(newLocale)
      break
    case 'logout':
      ElMessageBox.confirm(
        t('common.confirm'),
        t('common.logout'),
        {
          confirmButtonText: t('common.confirm'),
          cancelButtonText: t('common.cancel'),
          type: 'warning'
        }
      ).then(() => {
        userStore.logout()
        router.push('/login')
      }).catch(() => {})
      break
  }
}

// 初始化主题
onMounted(() => {
  if (isDarkMode.value) {
    document.documentElement.classList.add('dark')
  }
})
</script>

<style scoped>
.app-container {
  height: 100vh;
  width: 100vw;
}

.dark-mode {
  background-color: #1f1f1f;
  color: #ffffff;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar {
  transition: width 0.3s;
  position: relative;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.sidebar-toggle {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.el-header {
  background-color: #409EFF;
  color: white;
  line-height: 60px;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>